<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

    <!-- Bootstrap -->
    <link href="../../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        th{
            text-align: center;
        }
        td{
            text-align: center;
        }

        .row-margin-top {
            margin-top: 25px;
        }

        p{
            font-family: 微软雅黑;
            font-size: large;
            color: black;
        }

        #curPage_ul{
            background-color: #ffc900;
        }
        .curPage{
            background-color: #ffc900;
        }
        .pageNum ul li.curPage {
            background-color: #ffc900;
        }
    </style>
    <script>
    function load_03(currentPage,rows){

     $.ajax({
      type: "post",
      url: "../../ticket/seeTicket",
    data:{"currentPage":currentPage,"rows":rows},
    success: function (data) {

    var ticket_table='';
        ticket_table+=' <table id="ticket_table" class="table table-bordered table-striped">\n' +
        '                    <thead>\n' +
        '                    <tr>\n' +
        '                        <th>电影票编号</th>\n' +
        '                        <th>演出计划编号</th>\n' +
        '                        <th>影厅编号</th>\n' +
        '                        <th>座位编号</th>\n' +
        '                        <th>生成票时间</th>\n' +
        '                        <th>票价(元)</th>\n' +
        '                        <th>影票状态</th>\n' +
        '                    </tr>\n' +
        '                    </thead>';


    $.each(data.list,function (ind,ele) {


        var hei=null;
        if(ele.ticketStatus==0){
            hei="正在观看"
        }
        if(ele.ticketStatus==1){
            hei="还未观看"
        }
        if(ele.ticketStatus==-1){
            hei="已观看"
        }


        ticket_table+='<tr>\n' +
            '                        <th>'+ele.ticketId+'</th>\n' +
            '                        <th>'+ele.scheduleId+'</th>\n' +
            '                        <th>'+ele.studioId+'</th>\n' +
            '                        <th>'+ele.seatId+'</th>\n' +
            '                        <th>'+ele.ticketTime+'</th>\n' +
            '                        <th>'+ele.ticketPrice+'(元)</th>\n' +
            '                        <th>'+hei+'</th>\n' +
            '                    </tr>';
    })
    $("#ticket_table").html(ticket_table);





    var prePage = currentPage - 1;
    if (prePage < 1) {
    prePage = 1
    }
    var afterPage = currentPage + 1;
    if (afterPage > data.totalPage) {
    afterPage = data.totalPage
    }
    var ticket_ul='';



        ticket_ul += '<li><a href="javascript:load_03(1,' + rows + ')">首页</a></li>';

        ticket_ul += '<li class="threeword"><a href="javascript:load_03('+prePage+','+rows+')">上一页</a></li>';


    var beginPage = 0;
    var endPage = 0;
    if (data.totalPage <= 10) {
    beginPage = 1;
    endPage = data.totalPage
    } else {
    if (currentPage - 5 <= 1) {
    beginPage = 1;
    endPage = beginPage + 9;
    }
    if (currentPage - 5 > 1) {
    beginPage = currentPage - 5;
    endPage = currentPage + 4;
    if (endPage >= data.totalPage) {
    endPage = data.totalPage;
    beginPage = endPage - 9;
    }
    }
    }
    for (var i = beginPage; i <= endPage; i++) {
    // rotte_pageBean_ul+='<li><a href="#">'+i+'</a></li>';
    if (currentPage == i) {
        ticket_ul += '<li class="curPage" id="curPage_ul"  onclick="load_03(' + i + ',' + rows + ')"><a href="javascript:load_03(' + i + ',' + rows + ')">' + i + '</a></li>';

    } else {

        ticket_ul += '<li  onclick="load_03(' + i + ',' + rows + ')"><a href="javascript:load_03(' + i + ',' + rows + ')">' + i + '</a></li>';
    }

    }
        ticket_ul += '<li class="threeword"><a href="javascript:load_03(' + afterPage + ',' + rows + ');">下一页</a></li>';
        ticket_ul += '<li class="threeword"><a href="javascript:load_03(' + data.totalPage + ',' + rows + ');">末页</a></li>';

        $("#ticket_ul").html(ticket_ul);





    },
    dataType: "json"


    })





    };

            $(function () {


                load_03(1,5);

                $.ajax({
                    url:"../../ticket/numTicket",
                    type:"post",
                    success:function (data) {

                        var totalPrice='<span>销售额:'+data+' (元)</span>';
                        $("#totalPrice").html(totalPrice);
                    }
                })
            })

        </script>
</head>
<body>


<!--页面主体-->
<div class="container-fluid">
    <div class="row row-margin-top">
        <div class="col-md-12">
            <div class = "row">
                <div class="col-md-3 col-md-offset-5">
                    <h1>票房统计</h1>
                </div>
            </div>

            <div class = "row">
                <div class="col-md-5 col-md-offset-9">
                        <div class="col-md-5">
                            <p class="form-control-static" id="totalPrice"><span>销售额: </span></p>
                        </div>
                </div>
            </div>


            <div class="row row-margin-top">
                <table id="ticket_table" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>电影票编号</th>
                        <th>演出计划编号</th>
                        <th>影厅编号</th>
                        <th>座位编号</th>
                        <th>生成票时间</th>
                        <th>票价(元)</th>
                        <th>影票状态</th>
                    </tr>
                    </thead>



                </table>
                <ul class="pagination" id="ticket_ul">


                </ul>
            </div>
        </div>
    </div>

    <div class="row ">
        <!-- 分页条信息 -->
        <div id="page_nav" class="col-md-4 col-md-offset-4">
        </div>
    </div>
    <!-- 显示分页信息 -->
    <div class="row ">
        <!--分页文字信息  -->
        <div id="page_info" class="col-md-4 col-md-offset-4">
        </div>
    </div>
</div>
</body>
</html>